<template>
<q-page class="bg-dark row" ref="pagewrap">

    <q-dialog v-model="isloginshow" @hide="handlecancellogin">
        <q-card>
            <q-card-section>
                <div class="text-h6">{{ login.name }}</div>
            </q-card-section>

            <q-card-section class="q-pt-none column items-center q-pa-md">
                <div id="qrCode" ref="qrCodediv"></div>
                <div class="q-mt-md">请用微信扫码登录</div>
            </q-card-section>

            <q-card-actions align="right">
                <q-btn flat label="取消登录" color="primary" v-close-popup />
            </q-card-actions>
        </q-card>
    </q-dialog>

    <div class="col-sm-9 col-xs-8 column " ref="leftWrap">

        <div style="height:70%">
            <q-card id="videocontainer" ref="videocontainer" square class="card-shadow videobg" style="height: 100%; display: flex">
                <q-card v-if="isshowthumb" class="thumbnail" ref="thumbnail" :style="thumbnailstyle"></q-card>
                <div :style="markstagestyle" id="my-canvas">
                    <canvas id="canvas" :width="canvaswidth" :height="canvasheight" crossorigin="anonymous"></canvas>
                </div>

                <canvas crossorigin="anonymous" ref="videocanvas" id="videocanvas" :style="canvasstyle" :height="canvasheight" :width="canvaswidth"></canvas>
                <video @timeupdate="timeupdate" v-show="isvideoplayershow" crossorigin="anonymous" style="width: 100%; height: 100%" ref="videoplayer" preload="auto" class="video-js"></video>
            </q-card>
        </div>
        <div class="  back-dark card-shadow column" style="height:30%;border-radius: 0 0 5px 5px">
            <q-linear-progress ref="progress" :value="progress" @mousemove="handlepreview($event)" @mouseout="handlemouseout($event)" @click="handleseek($event)" color="teal-6" track-color="grey-9" style="height: 15px" />
            <div style="height:45px" class="back-dark row items-center q-pl-md justify-between q-py-sm">
                <div class="q-ml-md">{{ currentTime }}/{{ duration }}</div>
                <div class="row items-center q-gutter-x-md">
                    <q-btn push size="10px" @click="handlescreenshot" round color="teal-6" text-color="white" icon="mdi-monitor-screenshot">
                        <q-tooltip anchor="top middle" self="center middle" content-class="bg-teal-6">屏幕截图</q-tooltip>
                    </q-btn>
                    <q-btn push size="20px" padding="none" @click="handleplay" round color="white" text-color="teal-6" :icon="
                    isplay
                      ? 'mdi-pause-circle-outline'
                      : 'mdi-play-circle-outline'
                  ">
                        <q-tooltip anchor="top middle" self="center middle" content-class="bg-teal-6">{{ isplay ? "暂停" : "播放" }}</q-tooltip>
                    </q-btn>
                    <div class="row justify-center" style="position: relative">
                        <q-btn push size="10px" @click="isadjustvolume = isadjustvolume ? false : true" round color="teal-6" text-color="white" :icon="isvoice ? 'mdi-volume-medium' : 'mdi-volume-mute'">
                        </q-btn>
                        <q-slider v-if="isadjustvolume" style="
                      position: absolute;
                      bottom: -5px;
                      left:30px;
                      margin: 0 auto;
                      z-index: 1001;
                      width: 120px;
                    " v-model="curvolume" @change="handlevolume" :min="0" :max="100" color="teal-6" label-color="teal-6" label-always />
                    </div>
                </div>

                <q-btn-dropdown unelevated split menu-anchor="top middle" menu-self="bottom middle" class="q-mr-md" color="back-dark" content-class="white" :label="'倍速' + curspeed">
                    <q-list>
                        <q-item v-if="curspeed !== '2.0'" clickable v-close-popup @click="handlespeed('2.0')">
                            <q-item-section>
                                <q-item-label>2.0</q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item v-if="curspeed !== '1.5'" clickable v-close-popup @click="handlespeed('1.5')">
                            <q-item-section>
                                <q-item-label>1.5</q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-item v-if="curspeed !== '1.25'" clickable v-close-popup @click="handlespeed('1.25')">
                            <q-item-section>
                                <q-item-label>1.25</q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-item v-if="curspeed !== '1.0'" clickable v-close-popup @click="handlespeed('1.0')">
                            <q-item-section>
                                <q-item-label>1.0</q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-item v-if="curspeed !== '0.75'" clickable v-close-popup @click="handlespeed('0.75')">
                            <q-item-section>
                                <q-item-label>0.75</q-item-label>
                            </q-item-section>
                        </q-item>
                        <q-item v-if="curspeed !== '0.5'" clickable v-close-popup @click="handlespeed('0.5')">
                            <q-item-section>
                                <q-item-label>0.5</q-item-label>
                            </q-item-section>
                        </q-item>
                    </q-list>
                </q-btn-dropdown>
            </div>
            <q-card style="height: calc(100% - 60px);overflow:scroll" flat class="back-dark q-pa-sm card-shadow hide-scrollbar" >
                <q-card-section class="q-pa-sm">
                    <q-input dark outlined clearable borderless class="full-height" type="textarea" input-style="height:100%;max-height:100px"  v-model="curcomment.content" color="teal-6 bg-grey-10" style="" placeholder="请输入修改意见……">

                    </q-input>
                </q-card-section>

                <q-card-section class="q-pa-sm row justify-end">
                    <div class="row items-center">
                        <div>
                            <q-badge outline :style="toolborder" class="q-ma-sm q-pa-xs bg-tm" align="middle">
                                <q-icon name="mdi-cursor-pointer" size="18px" class="q-ml-xs q-mr-xs" @click="drawTypeChange('')" :color="drawType == '' ? color : 'white'">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">选择工具</q-tooltip>
                                </q-icon>

                                <q-icon name="mdi-border-color" size="18px" class="q-ml-xs q-mr-xs" @click="drawTypeChange('pen')" :color="drawType == 'pen' ? color : 'white'">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">画笔工具</q-tooltip>
                                </q-icon>

                                <q-icon name="mdi-rectangle-outline" size="22px" class="q-ml-xs q-mr-xs" :color="drawType == 'rectangle' ? color : 'white'" @click="drawTypeChange('rectangle')">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">矩形工具</q-tooltip>
                                </q-icon>
                                <q-icon name="mdi-arrow-top-right" size="18px" class="q-ml-xs q-mr-xs" @click="drawTypeChange('arrow')" :color="drawType == 'arrow' ? color : 'white'">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">箭头工具</q-tooltip>
                                </q-icon>
                                <q-icon name="mdi-format-text" size="18px" class="q-ml-xs q-mr-xs" @click="drawTypeChange('text')" :color="drawType == 'text' ? color : 'white'">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">文字批注</q-tooltip>
                                </q-icon>
                                <q-icon @click="drawTypeChange('colorselect')" name="mdi-palette" size="18px" class="q-ml-xs q-mr-xs" color="white">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">颜色选择</q-tooltip>
                                    <q-popup-proxy ref="colorselect" transition-show="scale" transition-hide="scale">
                                        <q-color @change="handleclosecolor" no-header v-model="color" />
                                    </q-popup-proxy>
                                </q-icon>
                                <q-icon name="mdi-undo-variant" size="18px" @click="handlecancel" :color="isEmpty ? 'grey' : 'white'" class="q-ml-xs q-mr-xs">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">撤销</q-tooltip>
                                </q-icon>
                                <q-icon name="mdi-backspace-outline" size="18px" class="q-ml-xs q-mr-xs" @click="hanldeclearcanvas" :color="isEmpty ? 'grey' : 'white'">
                                    <q-tooltip anchor="top middle" self="bottom middle" content-class="white">清除画布</q-tooltip>
                                </q-icon>
                            </q-badge>
                            <q-badge class="q-ma-sm q-pa-xs bg-tm" align="middle">
                                <q-icon name="mdi-clock-outline" size="22px" class="q-ml-xs q-mr-xs" />
                                <span class="q-mr-xs">{{
                currentTime ? currentTime : "00:00"
              }}</span>
                            </q-badge>
                        </div>
                        <div class="q-ml-md">
                            <q-btn @click="handlesend" push size="12px" color="cyan-8" label="发送" />
                        </div>
                    </div>

                </q-card-section>

            </q-card>
        </div>

    </div>
    <div class="col-sm-3 col-xs-4 " style="overflow:hidden">
        <q-card flat class="column back-dark   card-shadow" style="height: 100%">
            <q-card-section>
                <q-tabs v-model="tab" dense class="text-white " active-color="teal-6" indicator-color="teal-6" align="justify" narrow-indicator>
                    <q-tab name="comments" :label="'评论(' + comments.length + '条)'" />
                    <q-tab name="videoinfo" label="文件信息" />
                </q-tabs>

                <q-separator />

            </q-card-section>

            <q-tab-panels class="bg-grey-10 col-grow" v-model="tab" animated>
                <q-tab-panel class="q-pa-none no-scroll column" name="comments" style="over-flow:hide">
                    <div class="row q-pa-sm items-center" style="height:70px">
                        <div class="col-7 ellipsis">
                            <q-input v-model="commentsearch" filled dense type="search" color="teal-6" placeholder="搜索评论……" dark clearable @clear="handleclear">
                                <template v-slot:append>
                                    <q-icon @click="searchcom" name="search" />
                                </template>
                            </q-input>
                        </div>
                        <div class="col-5 row no-wrap items-center justify-evenly">
                            <q-btn round flat @click="handleDownload" color="teal-6" icon="mdi-cloud-download-outline">
                                <q-tooltip anchor="bottom middle" self="top middle" content-class="white">下载评论</q-tooltip>
                            </q-btn>
                            <q-btn round flat color="teal-6" icon="mdi-sort">
                                <!-- <q-tooltip
                      anchor="bottom middle"
                      self="top middle"
                      content-class="white"
                      >排序</q-tooltip
                    > -->
                                <q-menu>
                                    <q-list dense style="min-width: 100px">
                                        <q-item clickable v-close-popup>
                                            <q-item-section @click="handlesort(0)">
                                                <div class="row items-center">最新发布</div>
                                            </q-item-section>
                                        </q-item>
                                        <q-item clickable v-close-popup>
                                            <q-item-section @click="handlesort(1)">
                                                <div class="row items-center">最早发布</div>
                                            </q-item-section>
                                        </q-item>
                                        <q-separator />
                                        <q-item clickable v-close-popup>
                                            <q-item-section @click="handlesort(2)">
                                                <div class="row items-center">按时间码</div>
                                            </q-item-section>
                                        </q-item>
                                    </q-list>
                                </q-menu>
                            </q-btn>
                        </div>
                    </div>


                    <q-scroll-area :thumb-style="thumbStyle" class="q-pa-sm" style="height: calc(100% - 70px); width: 100%;" content-style="width:100%;">
                        <q-card  v-for="(item, index) in comments" :key="index" :class="
                    curcomid == item.wc_id
                      ? 'my-card q-pa-sm q-mb-sm transparent activecomment'
                      : 'my-card q-pa-sm q-mb-sm transparent'
                  " @click="handlecomment(item)" style="width:100%">
                            <q-card-section class="q-pa-sm text-white">
                                <div class="text-grey" style="
                        display: flex;
                        align-items: center;

                      ">
                                    <div style="
                          width: 5px;
                          height: 22px;
                          background-color: #409eff;
                          margin-right: 20px;
                        "></div>
                                    <div class="ellpsis">
                                        <q-badge outline color="light-blue-5">{{
                          item.curtimelabel
                        }}</q-badge>
                                        <span class="q-ml-sm">{{ item.username==null?item.nickname:item.username }}</span>
                                    </div>
                                    <div v-if="
                          item.replys.length > 0 && curcomid == item.wc_id
                        " style="position: absolute; right: 5px" class="text-indigo-4">
                                        <q-btn size="sm" @click="isreplyfold = isreplyfold ? false : true" flat>{{
                            isreplyfold && curcomid == item.wc_id
                              ? "展开回复"
                              : "折叠回复"
                          }}</q-btn>
                                    </div>
                                </div>
                                <div style="margin-left: 25px" class="q-pt-sm row text-body">
                                  <div class=" text-justify" >
                                    {{ item.content }}
                                  </div>

                                </div>
                                <div class="q-py-sm text-grey ellipsis">
                                    {{ item.com_time }}
                                </div>
                            </q-card-section>

                            <q-separator color="grey-8" />

                            <q-card-actions class="q-pa-sm text-indigo-4" align="right">

                                <div v-if="isLogin">
                                    <q-btn v-if="user.openid && user.openid == item.openid||user.eid && user.eid == item.com_user" size="sm" @click="handledeletecom(item)" flat>删除</q-btn>
                                </div>

                                <q-btn size="sm" @click="handleclickreply" flat>{{
                        isreply && curcomid == item.wc_id
                          ? "取消回复"
                          : "回复"
                      }}({{ item.replys.length }})</q-btn>
                            </q-card-actions>
                            <q-card-section v-show="curcomid == item.wc_id && isreply" class="q-pa-sm">
                                <q-separator />
                                <q-input clearable dark color="teal-6" counter :maxlength="100" v-model="replycontent" filled autogrow />
                                <q-card-actions class="q-pa-sm text-indigo-4" align="right">
                                    <q-btn size="sm" @click="handlereply(item)" flat>发送</q-btn>
                                </q-card-actions>
                            </q-card-section>
                            <q-card v-show="curcomid == item.wc_id && !isreplyfold" v-for="(v, wr_id) in item.replys" :key="wr_id" @click="clickreply(v)" class="q-pl-md transparent">
                                <q-card-section class="q-pa-sm text-white">
                                    <div class="text-grey" style="
                          display: flex;
                          align-items: center;

                        ">
                                        <div style="
                            width: 10px;
                            height: 10px;
                            border-radius: 5px;
                            background-color: #409eff;
                            margin-right: 20px;
                          "></div>
                                        <div class="ellipsis">
                                            {{ v.username==null?v.nickname:v.username }}
                                            <span class="q-ml-sm">回复</span>

                                            <span class="q-ml-sm">{{ v.curusername==null?v.curnickname:v.curusername }}</span>
                                        </div>
                                    </div>
                                    <div style="margin-left: 25px" class="q-pt-sm text-body">
                                        {{ v.content }}
                                    </div>
                                </q-card-section>

                                <q-separator />

                                <q-card-actions class="q-pa-sm text-indigo-6" align="right">
                                    <div style="position: absolute; left: 25px; width: 115px" class="text-grey ellipsis">
                                        {{ v.reply_time }}
                                    </div>
                                    <q-btn v-if="user && user.eid == v.repuser" size="sm" @click="handledeleterep(v)" flat>删除</q-btn>
                                    <q-btn size="sm" @click="handleclickreplyreply" flat>{{
                        curreplyid == v.wr_id && isreplyreply
                          ? "取消回复"
                          : "回复"
                      }}</q-btn>
                                </q-card-actions>
                                <q-card-section v-show="curreplyid == v.wr_id && isreplyreply" class="q-pa-sm">
                                    <q-separator />
                                    <q-input clearable dark color="teal-6" counter :maxlength="100" v-model="replyreply" filled autogrow />
                                    <q-card-actions class="q-pa-sm text-indigo-6" align="right">
                                        <q-btn size="sm" @click="handlereplyreply(v)" flat>发送</q-btn>
                                    </q-card-actions>
                                </q-card-section>
                            </q-card>
                        </q-card>
                    </q-scroll-area>

                    <q-dialog v-model="isdeleteDialogshow" persistent>
                        <q-card>
                            <q-card-section class="row items-center">
                                <span class="q-ml-sm">你确认删除这条评论吗？</span>
                            </q-card-section>

                            <q-card-actions align="right">
                                <q-btn flat label="取消" color="primary" @click="canceldelete" />
                                <q-btn flat label="确认删除" color="primary" @click="confirmdelete" />
                            </q-card-actions>
                        </q-card>
                    </q-dialog>
                </q-tab-panel>

                <q-tab-panel name="videoinfo" class="q-pa-none">
                    <q-list padding class="rounded-borders">
                        <q-item-label header class="text-teal-6">基本信息</q-item-label>
                        <q-item v-ripple dense>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    文件名
                                </div>
                            </q-item-section>
                            <q-item-section> {{ videoData.name }} </q-item-section>
                        </q-item>

                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    上传者
                                </div>
                            </q-item-section>
                            <q-item-section> {{ videoData.username }} </q-item-section>
                        </q-item>

                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    上传时间
                                </div>
                            </q-item-section>
                            <q-item-section> {{ videoData.ctime }} </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    文件大小
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videoinfo.format.size }}
                            </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    分辨率
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videowidth }}x{{ videoheight }}
                            </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    帧率
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videoinfo.streams[0].avg_frame_rate.split("/")[0] }}FPS
                            </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    码率
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videoinfo.format.bit_rate }}
                            </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    格式
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videoformat }}
                            </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    视频编码
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videoinfo.streams[0].codec_name }}
                            </q-item-section>
                        </q-item>
                        <q-item v-ripple>
                            <q-item-section side class="text-grey-6">
                                <div class="row" style="min-width: 80px; max-width: 100px">
                                    音频编码
                                </div>
                            </q-item-section>
                            <q-item-section>
                                {{ videoinfo.streams[1].codec_name }}
                            </q-item-section>
                        </q-item>
                    </q-list>
                </q-tab-panel>
            </q-tab-panels>
        </q-card>
    </div>

</q-page>
</template>

<script>
import QRCode from "qrcodejs2";
import storage from "assets/utils/storage";
import html2canvas from "html2canvas";
import {
    getfiledata,
    submitComment,
    getworkComments,
    setworkreply,
    setreplyreply,
    deletecomment,
    downloadComments,
    searchcomment,
    confirmlogin,
} from "assets/api/studio";
import {
    date
} from "quasar";
import {
    getSeconds
} from "assets/utils/stodate";
export default {
    name: "fileindex",
    data() {
        return {
            leftWrapStyle: {
                height: '100px'
            },
            i: "",
            login: {
                platform: 0,
                name: "",
                src: "",
            },
            isLogin: false,
            isloginshow: false,
            commentsearch: "",
            sort: 0,
            isreplyfold: true,
            isdeleteDialogshow: false,
            delete_wc_id: "",
            delete_wr_id: "",
            thumbStyle: {
                right: "2px",
                borderRadius: "5px",
                backgroundColor: "#027be3",
                width: "5px",
                opacity: 0.75,
            },
            toolborder: {
                color: "rgb(0, 150, 136)",
            },
            pid: "",
            markstagestyle: {
                position: "absolute",
                zIndex: 2000,
                height: "",
                width: "",
            },
            isvideoplayershow: true,
            canvaswidth: 0,
            canvasheight: 0,
            offwidth: 0,
            offheight: 0,
            canvasstyle: {
                minWidth: "200px",
                position: "absolute",
                zIndex: 1000,
            },
            tab: "comments",
            poster: "",

            work_id: "",
            player: {},
            isplay: false,
            currentTime: "00:00",
            duration: "00:00",
            videowidth: "",
            videoheight: "",
            videoData: {},
            videoinfo: {
                format: {
                    size: 0,
                    bitRate: "",
                    filename: "",
                },
                streams: [{
                        avg_frame_rate: "",
                        codec_name: "",
                    },
                    {
                        codec_name: "",
                    },
                ],
            },
            videourl: "",
            count: "",
            comments: [],
            curcomid: "",
            replycontent: "",
            isreply: false,
            curreplyid: "",
            replyreply: "",
            isreplyreply: false,
            progress: 0,
            serveurl: "",
            curcomment: {},
            curtime: "",
            ismark: false,
            isshowthumb: false,
            thumbnailstyle: {},
            imgInfo: {},
            curspeed: "1.0",
            isvoice: true,
            curvolume: 70,
            isadjustvolume: false,
            videoformat: "",

            //mark功能
            rect: [],
            canvas: {},
            showMenu: false,
            x: "",
            y: "",
            mouseFrom: {},
            mouseTo: {},
            drawType: null, //当前绘制图像的种类
            canvasObjectIndex: 0,
            textbox: null,
            rectangleLabel: "warning",
            drawWidth: 2, //笔触宽度
            color: "rgb(0, 150, 136)", //画笔颜色
            drawingObject: null, //当前绘制对象
            moveCount: 1, //绘制移动计数器
            doDrawing: false, // 绘制状态

            //polygon 相关参数
            polygonMode: false,
            pointArray: [],
            lineArray: [],
            activeShape: false,
            activeLine: "",
            line: {},
            delectKlass: {},
            isEmpty: true,
            ismarkready: false,
        };
    },
    beforeCreate() {
        if (!this.$platform.inDesktop()) {
            this.$router.replace('/m/file/' + this.$route.params.work_id)
        }
    },
    created() {
        this.work_id = this.$route.params.work_id;

        // if (this.$q.platform.is.mobile || this.$platform.inMiniProgram()) {
        //     this.$router.replace('/m/file/' + this.work_id)
        // } else {
        this.loadfiledata();
        this.loadcomments();
        let userinfo = storage.getItem("userinfo");
        if (userinfo) {
            this.isLogin = true;
            this.user = userinfo;
        }
        // }
    },
    mounted() {
        this.handleLeftHeight();
        var vm = this;
        window.addEventListener("resize", function () {
            vm.adjustcanvas();
            vm.reloadmarkcanvas();

        });

        document.onkeydown = (e) => {
            // 键盘 delect删除所选元素
            if (e.keyCode == 46) {
                this.deleteObj();
            }
            // ctrl+z 删除最近添加的元素
            if (e.keyCode == 90 && e.ctrlKey) {
                this.canvas.remove(
                    this.canvas.getObjects()[this.canvas.getObjects().length - 1]
                );
            }
        };
    },
    watch: {
        drawType() {
            this.canvas.selection = !this.drawType;
        },
        width() {
            this.canvas.setWidth(this.canvaswidth);
        },
        height() {
            this.canvas.setHeight(this.canvasheight);
        },
    },
    updated() {},
    beforeDestroy() {
      window.removeEventListener("resize",function () {
            vm.adjustcanvas();
            vm.reloadmarkcanvas();

        });
        if (JSON.stringify(this.player) == "{}") {} else {
            this.player.dispose();
        }

    },
    methods: {
        handleLeftHeight() {
            function getClientHeight() {
                var clientHeight = 0;
                if (document.body.clientHeight && document.documentElement.clientHeight) {
                    var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
                } else {
                    var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
                }
                return clientHeight;
            }

            let height = getClientHeight();
            this.leftWrapStyle.height = height - 50 + "px";
            console.log(height);

        },
        handleHome() {
            window.open('https://yfyh.cc')
        },
        randomCoding() {
            //创建26个字母数组
            var arr = [
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                "U",
                "V",
                "W",
                "X",
                "Y",
                "Z",
            ];
            var idvalue = "";
            var n = 4; //这个值可以改变的，对应的生成多少个字母，根据自己需求所改
            for (var i = 0; i < n; i++) {
                idvalue += arr[Math.floor(Math.random() * 26)];
            }
            return idvalue;
        },
        handlecancellogin() {
            clearInterval(this.i);
        },
        async handlelogin(val) {
            this.isloginshow = true;
            if (val == 0) {
                this.login.name = "微信登录";
                let appid = "wx19f35b368b121f53";

                let zimu = await this.randomCoding();
                let state = new Date().getTime() + zimu;
                let redirecturl = encodeURIComponent("http://oa.yfyh.cc/codepage");
                let loginsrc =
                    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                    appid +
                    "&redirect_uri=" +
                    redirecturl +
                    "&response_type=code&scope=snsapi_userinfo&state=" +
                    state +
                    "#wechat_redirect";
                new QRCode(this.$refs.qrCodediv, {
                    text: loginsrc,
                    width: 200,
                    height: 200,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
                });
                let reqdata = {
                    state: state,
                };
                var total = 0;
                var vm = this;
                this.i = setInterval(() => {
                    total++;
                    if (total == 50) {
                        vm.$q.notify({
                            color: "red-5",
                            textColor: "white",
                            icon: "warning",
                            position: "top",
                            message: "请求超时，请重新扫码！",
                            timeout: 1000,
                        });
                        vm.isloginshow = false;
                        clearInterval(i);
                    }
                    confirmlogin(reqdata).then((res) => {
                        if (res.data.data.length > 0) {
                            vm.isloginshow = false;
                            storage.setItem("userinfo", res.data.data[0]);
                            vm.user = res.data.data[0];
                            vm.$q.notify({
                                position: "top",
                                message: "登录成功！",
                                timeout: 1000,
                                color: "light-green-4",
                                icon: "far fa-check-circle",
                                textColor: "white",
                            });
                            clearInterval(i);
                        }
                    });
                }, 2000);
            }
        },
        handlelogout() {
            storage.removeItem("userinfo");
            storage.removeItem("user");
            this.user = {};
            this.isreply = this.isreplyreply = false;
        },
        handlesort(val) {
            console.log(val);
            this.sort = val;
            this.loadcomments();
        },
        handleclear() {
            this.comments = [];
            this.loadcomments();
        },
        searchcom() {
            let reqdata = {
                keyword: this.commentsearch,
                work_id: this.work_id,
            };
            searchcomment(reqdata).then((res) => {
                console.log(res.data);
                if (res.data.data.length > 0) {
                    let data = res.data.data;
                    data.forEach((item) => {
                        item.com_time = date.formatDate(item.com_time, "YYYY/MM/DD HH:mm");
                        item.curtimelabel = getSeconds(item.curtime);
                        if (item.replys.length > 0) {
                            item.replys.forEach((v) => {
                                v.reply_time = date.formatDate(
                                    v.reply_time,
                                    "YYYY/MM/DD HH:mm"
                                );
                            });
                        }
                    });
                    this.comments = data;
                } else {
                    this.comments = [];
                    this.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "top",
                        message: "暂无查询评论！",
                        timeout: 1000,
                    });
                }
            });
        },
        //下载评论
        handleDownload() {
            if (this.user.username) {
                if (this.comments.length > 0) {
                    let reqdata = {
                        work_id: this.work_id,
                        pid: this.pid,
                        comments: this.comments,
                    };
                    downloadComments(reqdata).then((res) => {
                        if (res.data.code == 1) {
                            var save_link = document.createElement("a");
                            save_link.href = this.GLOBAL.serveurl + res.data.dataurl;
                            save_link.download = res.data.filename;

                            var event = document.createEvent("MouseEvents");
                            event.initMouseEvent(
                                "click",
                                true,
                                false,
                                window,
                                0,
                                0,
                                0,
                                0,
                                0,
                                false,
                                false,
                                false,
                                false,
                                0,
                                null
                            );
                            save_link.dispatchEvent(event);
                        }
                    });
                } else {
                    this.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "top",
                        message: "暂无评论！",
                        timeout: 1000,
                    });
                }
            } else {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "top",
                    message: "请先登录！",
                    timeout: 1000,
                });
            }
        },
        confirmdelete() {
            if (this.delete_wc_id) {
                var reqdata = {
                    wc_id: this.delete_wc_id,
                };
            }
            if (this.delete_wr_id) {
                var reqdata = {
                    wr_id: this.delete_wr_id,
                };
            }
            var vm = this;
            deletecomment(reqdata)
                .then((res) => {
                    if (res.data.code == 1) {
                        vm.$q.notify({
                            position: "center",
                            message: "删除成功！",
                            timeout: 1000,
                            color: "light-green-4",
                            icon: "far fa-check-circle",
                            textColor: "white",
                        });
                        vm.isreply = false;
                        vm.replycontent = "";
                        vm.loadcomments();
                        vm.canceldelete();
                    } else {
                        vm.$q.notify({
                            color: "red-5",
                            textColor: "white",
                            icon: "warning",
                            position: "center",
                            message: "删除失败！",
                            timeout: 1000,
                        });
                    }
                })
                .catch(() => {
                    vm.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "center",
                        message: "删除失败！",
                        timeout: 1000,
                    });
                });
        },
        canceldelete() {
            this.isdeleteDialogshow = false;
            this.delete_wc_id = "";
            this.delete_wr_id = "";
        },
        handleclickreply() {
            if (this.user.username) {
                if (this.isreply) {
                    this.isreply = false;
                } else {
                    this.isreply = true;
                }
            } else {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "center",
                    message: "请先登录！",
                    timeout: 1000,
                });
            }
        },
        handleclickreplyreply() {
            if (this.user.username) {
                if (this.isreplyreply) {
                    this.isreplyreply = false;
                } else {
                    this.isreplyreply = true;
                }
            } else {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "center",
                    message: "请先登录！",
                    timeout: 1000,
                });
            }
        },
        clickreply(e) {
            this.curreplyid = e.wr_id;
        },
        handledeletecom(e) {
            this.isdeleteDialogshow = true;
            this.delete_wc_id = e.wc_id;
        },
        handledeleterep(e) {
            this.isdeleteDialogshow = true;
            this.delete_wr_id = e.wr_id;
        },
        //回复
        handlereply(e) {
            if (!this.replycontent) {
                return;
            }
            if (this.user.eid) {
                if (e.eid) {
                    var reqdata = {
                        repuser: this.user.eid,
                        curuser: e.eid,
                        content: this.replycontent,
                        wc_id: e.wc_id,
                    };
                } else {
                    var reqdata = {
                        repuser: this.user.eid,
                        curopenid: e.openid,
                        content: this.replycontent,
                        wc_id: e.wc_id,
                    };
                }
            } else {
                if (e.eid) {
                    var reqdata = {
                        repopenid: this.user.openid,
                        curuser: e.eid,
                        content: this.replycontent,
                        wc_id: e.wc_id,
                    };
                } else {
                    var reqdata = {
                        repopenid: this.user.openid,
                        curopenid: e.openid,
                        content: this.replycontent,
                        wc_id: e.wc_id,
                    };
                }
            }

            var vm = this;
            setworkreply(reqdata)
                .then((res) => {
                    if (res.data.code == 1) {
                        vm.$q.notify({
                            position: "center",
                            message: "回复成功！",
                            timeout: 1000,
                            color: "light-green-4",
                            icon: "far fa-check-circle",
                            textColor: "white",
                        });
                        vm.isreply = false;
                        vm.replycontent = "";
                        vm.loadcomments();
                    } else {
                        vm.$q.notify({
                            color: "red-5",
                            textColor: "white",
                            icon: "warning",
                            position: "center",
                            message: "回复失败！",
                            timeout: 1000,
                        });
                    }
                })
                .catch(() => {
                    vm.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "center",
                        message: "回复失败！",
                        timeout: 1000,
                    });
                });
        },
        handlereplyreply(e) {
            if (!this.replyreply) {
                return;
            }
            let reqdata = {
                repuser: this.user.eid,
                curuser: e.repuser,
                content: this.replyreply,
                wc_id: e.wc_id,
            };
            var vm = this;
            setreplyreply(reqdata)
                .then((res) => {
                    if (res.data.code == 1) {
                        vm.$q.notify({
                            position: "center",
                            message: "回复成功！",
                            timeout: 1000,
                            color: "light-green-4",
                            icon: "far fa-check-circle",
                            textColor: "white",
                        });
                        vm.isreplyreply = false;
                        vm.replyreply = "";
                        vm.loadcomments();
                    } else {
                        vm.$q.notify({
                            color: "red-5",
                            textColor: "white",
                            icon: "warning",
                            position: "center",
                            message: "回复失败！",
                            timeout: 1000,
                        });
                    }
                })
                .catch(() => {
                    vm.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "center",
                        message: "回复失败！",
                        timeout: 1000,
                    });
                });
        },
        //点击评论
        handlecomment(e) {
            this.curcomid = e.wc_id;
            let seektime = e.curtime;
            this.isvideoplayershow = false;
            this.player.play();
            this.player.pause();
            this.adjustcanvas();
            this.$refs["videoplayer"].currentTime = seektime;
            this.drawvideocanvas();
            this.curtime = this.currentTime;
            this.curcomment.curtime = this.$refs["videoplayer"].currentTime;
            if (e.markimg) {
                this.reloadmarkcanvas();
                let markimg = this.GLOBAL.serveurl + e.markimg;
                var vm = this;
                var imgInstance = new fabric.Image.fromURL(markimg, function (oImg) {
                    oImg.scaleToHeight(vm.canvasheight, false);
                    oImg.scaleToWidth(vm.canvaswidth, false);
                    vm.canvas.add(oImg);
                }, {
                    crossOrigin: "anonymous"
                });

            }
        },
        //加载评论
        loadcomments() {
            this.comments = [];
            let reqdata = {
                work_id: this.work_id,
                sort: this.sort,
            };
            getworkComments(reqdata).then((res) => {
                if (res.data.data.length > 0) {
                    let data = res.data.data;
                    data.forEach((item) => {
                        item.com_time = date.formatDate(item.com_time, "YYYY/MM/DD HH:mm");
                        item.curtimelabel = getSeconds(item.curtime);
                        if (item.replys.length > 0) {
                            item.replys.forEach((v) => {
                                v.reply_time = date.formatDate(
                                    v.reply_time,
                                    "YYYY/MM/DD HH:mm"
                                );
                            });
                        }
                    });
                    this.comments = data;
                }
            });
        },
        //撤销操作
        handlecancel() {
            this.canvas.remove(
                this.canvas.getObjects()[this.canvas.getObjects().length - 1]
            );
        },
        //颜色选择成功后触发
        handleclosecolor() {
            this.toolborder.color = this.color;
            this.$refs["colorselect"].hide();
            this.drawType = "";
        },
        //重载画布
        reloadmarkcanvas() {
            if (this.ismarkready) {
                var arr = document.getElementsByClassName("canvas-container");
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] != null) arr[i].parentNode.removeChild(arr[i]);
                }
                var canvas = document.createElement("canvas");
                canvas.id = "canvas";
                canvas.crossorigin = "anonymous";
                canvas.width = this.canvaswidth;
                canvas.height = this.canvasheight;
                document.getElementById("my-canvas").appendChild(canvas);
                this.loadmarkcanvas();
            }
        },
        //加载画布
        loadmarkcanvas() {
            this.canvas = new fabric.Canvas("canvas", {
                // skipTargetFind: false, //当为真时，跳过目标检测。目标检测将返回始终未定义。点击选择将无效
                // selectable: false,  //为false时，不能选择对象进行修改
                // selection: false   // 是否可以多个对象为一组
            });
            this.canvas.selectionColor = "rgba(0,0,0,0.05)";
            this.canvas.on("mouse:down", this.mousedown);
            this.canvas.on("mouse:move", this.mousemove);
            this.canvas.on("mouse:up", this.mouseup);
            this.canvas.on("object:added", this.isCanvasEmpty);
            this.canvas.on("object:removed", this.isCanvasEmpty);
        },
        //检测画布是否为空
        isCanvasEmpty() {
            if (this.canvas.isEmpty()) {
                this.isEmpty = true;
            } else {
                this.isEmpty = false;
            }
        },
        // 开始绘制时，指定绘画种类
        drawTypeChange(e) {
            if (!this.isvideoplayershow) {
                this.drawType = e;
                this.canvas.skipTargetFind = !!e;
                if (e == "pen") {
                    // isDrawingMode为true 才可以自由绘画
                    this.canvas.isDrawingMode = true;
                    this.canvas.freeDrawingBrush.color = this.color;
                    this.canvas.freeDrawingBrush.width = 3;
                } else {
                    this.canvas.isDrawingMode = false;
                    if (e !== "text" && this.textbox) {
                        this.textbox.exitEditing();
                    }
                }
            }
        },
        // 鼠标按下时触发
        mousedown(e) {
            // 记录鼠标按下时的坐标
            var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY);
            this.mouseFrom.x = xy.x;
            this.mouseFrom.y = xy.y;
            this.doDrawing = true;
            if (this.drawType == "text") {
                this.drawing();
            }
            // 绘制多边形
            if (this.drawType == "polygon") {
                this.canvas.skipTargetFind = false;
                try {
                    // 此段为判断是否闭合多边形，点击红点时闭合多边形
                    if (this.pointArray.length > 1) {
                        // e.target.id == this.pointArray[0].id 表示点击了初始红点
                        if (e.target && e.target.id == this.pointArray[0].id) {
                            this.generatePolygon();
                        }
                    }
                    //未点击红点则继续作画
                    if (this.polygonMode) {
                        this.addPoint(e);
                    }
                } catch (error) {}
            }
        },
        // 鼠标松开执行
        mouseup(e) {
            var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY);
            this.mouseTo.x = xy.x;
            this.mouseTo.y = xy.y;
            this.drawingObject = null;
            this.moveCount = 1;
            if (this.drawType != "polygon") {
                this.doDrawing = false;
            }
        },

        //鼠标移动过程中已经完成了绘制
        mousemove(e) {
            if (this.moveCount % 2 && !this.doDrawing) {
                //减少绘制频率
                return;
            }
            this.moveCount++;
            var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY);
            this.mouseTo.x = xy.x;
            this.mouseTo.y = xy.y;
            // 多边形与文字框特殊处理
            if (this.drawType != "text" || this.drawType != "polygon") {
                this.drawing(e);
            }
            if (this.drawType == "polygon") {
                if (this.activeLine && this.activeLine.class == "line") {
                    var pointer = this.canvas.getPointer(e.e);
                    this.activeLine.set({
                        x2: pointer.x,
                        y2: pointer.y
                    });

                    var points = this.activeShape.get("points");
                    points[this.pointArray.length] = {
                        x: pointer.x,
                        y: pointer.y,
                        zIndex: 1,
                    };
                    this.activeShape.set({
                        points: points,
                    });
                    this.canvas.renderAll();
                }
                this.canvas.renderAll();
            }
        },
        deleteObj() {
            this.canvas.getActiveObjects().map((item) => {
                this.canvas.remove(item);
            });
        },
        transformMouse(mouseX, mouseY) {
            return {
                x: mouseX / 1,
                y: mouseY / 1
            };
        },
        // 绘制多边形开始，绘制多边形和其他图形不一样，需要单独处理
        drawPolygon() {
            this.drawType = "polygon";
            this.polygonMode = true;
            //这里画的多边形，由顶点与线组成
            this.pointArray = new Array(); // 顶点集合
            this.lineArray = new Array(); //线集合
            this.canvas.isDrawingMode = false;
        },
        addPoint(e) {
            var random = Math.floor(Math.random() * 10000);
            var id = new Date().getTime() + random;
            var circle = new fabric.Circle({
                radius: 5,
                fill: "#ffffff",
                stroke: "#333333",
                strokeWidth: 0.5,
                left: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
                top: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
                selectable: false,
                hasBorders: false,
                hasControls: false,
                originX: "center",
                originY: "center",
                id: id,
                objectCaching: false,
            });
            if (this.pointArray.length == 0) {
                circle.set({
                    fill: "red",
                });
            }
            var points = [
                (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
                (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
                (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
                (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
            ];

            this.line = new fabric.Line(points, {
                strokeWidth: 2,
                fill: "#999999",
                stroke: "#999999",
                class: "line",
                originX: "center",
                originY: "center",
                selectable: false,
                hasBorders: false,
                hasControls: false,
                evented: false,

                objectCaching: false,
            });
            if (this.activeShape) {
                var pos = this.canvas.getPointer(e.e);
                var points = this.activeShape.get("points");
                points.push({
                    x: pos.x,
                    y: pos.y,
                });
                var polygon = new fabric.Polygon(points, {
                    stroke: "#333333",
                    strokeWidth: 1,
                    fill: "#cccccc",
                    opacity: 0.3,

                    selectable: false,
                    hasBorders: false,
                    hasControls: false,
                    evented: false,
                    objectCaching: false,
                });
                this.canvas.remove(this.activeShape);
                this.canvas.add(polygon);
                this.activeShape = polygon;
                this.canvas.renderAll();
            } else {
                var polyPoint = [{
                    x: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
                    y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
                }, ];
                var polygon = new fabric.Polygon(polyPoint, {
                    stroke: "#333333",
                    strokeWidth: 1,
                    fill: "#cccccc",
                    opacity: 0.3,

                    selectable: false,
                    hasBorders: false,
                    hasControls: false,
                    evented: false,
                    objectCaching: false,
                });
                this.activeShape = polygon;
                this.canvas.add(polygon);
            }
            this.activeLine = this.line;

            this.pointArray.push(circle);
            this.lineArray.push(this.line);
            this.canvas.add(this.line);
            this.canvas.add(circle);
        },
        generatePolygon() {
            var points = new Array();
            this.pointArray.map((point, index) => {
                points.push({
                    x: point.left,
                    y: point.top,
                });
                this.canvas.remove(point);
            });
            this.lineArray.map((line, index) => {
                this.canvas.remove(line);
            });
            this.canvas.remove(this.activeShape).remove(this.activeLine);
            var polygon = new fabric.Polygon(points, {
                stroke: this.color,
                strokeWidth: this.drawWidth,
                fill: "rgba(255, 255, 255, 0)",
                opacity: 1,
                hasBorders: true,
                hasControls: false,
            });
            this.canvas.add(polygon);

            this.activeLine = null;
            this.activeShape = null;
            this.polygonMode = false;
            this.doDrawing = false;
            this.drawType = null;
        },
        drawing(e) {
            if (this.drawingObject) {
                this.canvas.remove(this.drawingObject);
            }
            var canvasObject = null;
            var left = this.mouseFrom.x,
                top = this.mouseFrom.y,
                mouseFrom = this.mouseFrom,
                mouseTo = this.mouseTo;
            switch (this.drawType) {
                case "arrow": //箭头
                    var x1 = mouseFrom.x,
                        x2 = mouseTo.x,
                        y1 = mouseFrom.y,
                        y2 = mouseTo.y;
                    var w = x2 - x1,
                        h = y2 - y1,
                        sh = Math.cos(Math.PI / 4) * 16;
                    var sin = h / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
                    var cos = w / Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2));
                    var w1 = (16 * sin) / 4,
                        h1 = (16 * cos) / 4,
                        centerx = sh * cos,
                        centery = sh * sin;
                    /**
                     * centerx,centery 表示起始点，终点连线与箭头尖端等边三角形交点相对x，y
                     * w1 ，h1用于确定四个点
                     */

                    var path = " M " + x1 + " " + y1;
                    path += " L " + (x2 - centerx + w1) + " " + (y2 - centery - h1);
                    path +=
                        " L " + (x2 - centerx + w1 * 2) + " " + (y2 - centery - h1 * 2);
                    path += " L " + x2 + " " + y2;
                    path +=
                        " L " + (x2 - centerx - w1 * 2) + " " + (y2 - centery + h1 * 2);
                    path += " L " + (x2 - centerx - w1) + " " + (y2 - centery + h1);
                    path += " Z";
                    canvasObject = new fabric.Path(path, {
                        stroke: this.color,
                        fill: this.color,
                        strokeWidth: this.drawWidth,
                    });
                    break;
                case "ellipse": //椭圆
                    // 按shift时画正圆，只有在鼠标移动时才执行这个，所以按了shift但是没有拖动鼠标将不会画圆
                    if (e.e.shiftKey) {
                        mouseTo.x - left > mouseTo.y - top ?
                            (mouseTo.y = top + mouseTo.x - left) :
                            (mouseTo.x = left + mouseTo.y - top);
                    }
                    var radius =
                        Math.sqrt(
                            (mouseTo.x - left) * (mouseTo.x - left) +
                            (mouseTo.y - top) * (mouseTo.y - top)
                        ) / 2;
                    canvasObject = new fabric.Ellipse({
                        left: (mouseTo.x - left) / 2 + left,
                        top: (mouseTo.y - top) / 2 + top,
                        stroke: this.color,
                        fill: "rgba(255, 255, 255, 0)",
                        originX: "center",
                        originY: "center",
                        rx: Math.abs(left - mouseTo.x) / 2,
                        ry: Math.abs(top - mouseTo.y) / 2,
                        strokeWidth: this.drawWidth,
                    });
                    break;
                case "rectangle": //长方形
                    // 按shift时画正方型
                    if (e.e.shiftKey) {
                        mouseTo.x - left > mouseTo.y - top ?
                            (mouseTo.y = top + mouseTo.x - left) :
                            (mouseTo.x = left + mouseTo.y - top);
                    }
                    var path =
                        "M " +
                        mouseFrom.x +
                        " " +
                        mouseFrom.y +
                        " L " +
                        mouseTo.x +
                        " " +
                        mouseFrom.y +
                        " L " +
                        mouseTo.x +
                        " " +
                        mouseTo.y +
                        " L " +
                        mouseFrom.x +
                        " " +
                        mouseTo.y +
                        " L " +
                        mouseFrom.x +
                        " " +
                        mouseFrom.y +
                        " z";
                    canvasObject = new fabric.Path(path, {
                        left: left,
                        top: top,
                        stroke: this.color,
                        strokeWidth: this.drawWidth,
                        fill: "rgba(255, 255, 255, 0)",
                        hasControls: false,
                    });
                    //也可以使用fabric.Rect
                    break;
                case "text": //文本框
                    this.textbox = new fabric.Textbox("", {
                        left: mouseFrom.x,
                        top: mouseFrom.y - 10,
                        // width: 150,
                        fontSize: 18,
                        borderColor: this.color,
                        fill: this.color,
                        hasControls: true,
                    });
                    this.canvas.add(this.textbox);
                    this.textbox.enterEditing();
                    // this.textbox.hiddenTextarea.focus();
                    break;

                default:
                    break;
            }

            if (canvasObject) {
                // canvasObject.index = getCanvasObjectIndex();\
                this.canvas.add(canvasObject); //.setActiveObject(canvasObject)
                this.drawingObject = canvasObject;
            }
        },
        //清空画布
        hanldeclearcanvas() {
            this.canvas.clear();
            this.isCanvasEmpty();
            this.drawType = null;
        },

        //调整视频音量
        handlevolume(value) {
            this.$refs["videoplayer"].volume = value / 100;
            this.isadjustvolume = false;
            if (value == 0) {
                this.isvoice = false;
            } else {
                this.isvoice = true;
            }
        },
        //调整视频速度
        handlespeed(speed) {
            this.curspeed = speed;
            this.$refs["videoplayer"].playbackRate = speed;
        },
        //截图
        handlescreenshot() {
            var vm = this;
            var video = this.$refs["videoplayer"];
            var t,
                a = document.createElement("canvas");
            (a.width = video.videoWidth),
            (a.height = video.videoHeight),
            a.getContext("2d").drawImage(video, 0, 0, a.width, a.height),
                a.toBlob(function (e) {
                    t = URL.createObjectURL(e);
                    var a = document.createElement("a");
                    (a.href = t),
                    (a.download = "视频截图" + vm.currentTime + "s.png"),
                    (a.style.display = "none"),
                    document.body.appendChild(a),
                        a.click(),
                        document.body.removeChild(a),
                        URL.revokeObjectURL(t);
                });
        },
        adjustcanvas() {
            return new Promise(() => {
                let videocontainer = document.getElementById("videocontainer");
                let curwidth = videocontainer.clientWidth;
                let curheight = videocontainer.clientHeight;
                if (this.canvasheight <= curheight) {
                    this.canvaswidth = curwidth;
                    this.canvasheight = (curwidth / this.videowidth) * this.videoheight;
                    this.canvasstyle.top = this.markstagestyle.top =
                        (curheight - this.canvasheight) / 2 + "px";
                    this.canvasstyle.left = this.markstagestyle.left = 0;

                    this.markstagestyle.width = this.canvaswidth + "px";
                    this.markstagestyle.height = this.canvasheight + "px";
                }
                if (this.canvasheight > curheight) {
                    this.canvasheight = curheight;
                    this.canvaswidth = (curheight / this.videoheight) * this.videowidth;
                    this.canvasstyle.top = this.markstagestyle.top = 0;
                    this.canvasstyle.left = this.markstagestyle.left =
                        (curwidth - this.canvaswidth) / 2 + "px";
                    this.markstagestyle.width = this.canvaswidth + "px";
                    this.markstagestyle.height = this.canvasheight + "px";
                }
            });
        },

        handlepreview(evt) {
            this.isshowthumb = true;
            let layerwidth = evt.layerX;
            let width = this.$refs["progress"].$el.clientWidth;
            if (this.$refs["thumbnail"]) {
                var thumbheight = this.$refs["thumbnail"].$el.clientHeight;
            }
            let curprogress = layerwidth / width;
            let img = new Image();
            img.src = this.thumbnailstyle.backgroundImage
                .replace("url(", "")
                .replace(")", "");
            const vm = this;
            img.onload = function () {
                vm.$set(vm.imgInfo, "width", img.width);
                vm.$set(vm.imgInfo, "height", img.height);
            };
            let percent = thumbheight / this.imgInfo.height;
            let curthumbwidth = (this.imgInfo.width * percent - width) * curprogress;
            this.thumbnailstyle.backgroundPosition = "-" + curthumbwidth + "px 0px";
        },
        handlemouseout(evt) {
            this.isshowthumb = false;
        },
        //提交评论
        handlesend() {
            if (this.isLogin) {
                if (!this.curcomment.content && this.isEmpty) {
                    this.$q.notify({
                        position: "center",
                        message: "请先写下你的建议吧！",
                        timeout: 1000,
                    });
                    return;
                }
                if (this.isEmpty) {
                    this.curcomment.pid = this.pid;
                    this.curcomment.work_id = this.work_id;
                    if (this.user.eid) {
                        this.curcomment.eid = this.user.eid;
                    } else {
                        this.curcomment.openid = this.user.openid;
                    }

                    var videocanvas = document.getElementById("videocanvas");
                    var context = videocanvas.getContext("2d");
                    var oldimgData = videocanvas.toDataURL("png");
                    var imgData = oldimgData.replace("image/png", "image/octet-stream");
                    this.curcomment.commentimg = imgData;
                    this.curcomment.curcanvaswidth = this.canvaswidth;
                    this.curcomment.curcanvasheight = this.canvasheight;
                } else {
                    var canvas = document.getElementById("canvas");
                    var videocanvas = document.getElementById("videocanvas");
                    var context = videocanvas.getContext("2d");
                    context.drawImage(canvas, 0, 0, this.canvaswidth, this.canvasheight);

                    var oldimgData = videocanvas.toDataURL("png");
                    var imgData = oldimgData.replace("image/png", "image/octet-stream");

                    var oldmarkimg = canvas.toDataURL("png");
                    var newmarkimg = oldmarkimg.replace(
                        "image/png",
                        "image/octet-stream"
                    );
                    this.curcomment.markimg = newmarkimg;
                    this.curcomment.commentimg = imgData;
                    this.curcomment.pid = this.pid;
                    this.curcomment.work_id = this.work_id;
                    if (this.user.eid) {
                        this.curcomment.eid = this.user.eid;
                    } else {
                        this.curcomment.openid = this.user.openid;
                    }
                    this.curcomment.curcanvaswidth = this.canvaswidth;
                    this.curcomment.curcanvasheight = this.canvasheight;
                }

                let comment = this.curcomment;
                var vm = this;
                submitComment(comment)
                    .then((res) => {
                        if (res.data.code == 1) {
                            vm.$q.notify({
                                position: "center",
                                message: "评论成功！",
                                timeout: 1000,
                                color: "light-green-4",
                                icon: "far fa-check-circle",
                                textColor: "white",
                            });
                            vm.loadcomments();
                            vm.hanldeclearcanvas();
                            vm.curcomment = {};
                        } else {
                            vm.$q.notify({
                                color: "red-5",
                                textColor: "white",
                                icon: "warning",
                                position: "center",
                                message: "评论失败！",
                                timeout: 1000,
                            });
                        }
                    })
                    .catch((err) => {
                        vm.$q.notify({
                            color: "red-5",
                            textColor: "white",
                            icon: "warning",
                            position: "center",
                            message: "评论失败！",
                            timeout: 1000,
                        });
                    });
            } else {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "top",
                    message: "请先登录！",
                    timeout: 1000,
                });
            }
        },
        saveFile(data, filename) {
            var save_link = document.createElement("a");
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent("MouseEvents");
            event.initMouseEvent(
                "click",
                true,
                false,
                window,
                0,
                0,
                0,
                0,
                0,
                false,
                false,
                false,
                false,
                0,
                null
            );
            save_link.dispatchEvent(event);
        },
        //将视频画在canvas上
        drawvideocanvas() {
            let video = this.$refs["videoplayer"];
            let canvas = this.$refs["videocanvas"];
            var context = canvas.getContext("2d");
            setInterval(function () {
                context.drawImage(video, 0, 0, this.canvaswidth, this.canvasheight);
            }, 20);
        },
        loaddplayer() {
            this.serveurl = this.GLOBAL.serveurl;
            this.videourl = this.serveurl + this.videoData.m3u8url;
            this.poster = this.serveurl + this.videoData.poster;
            let options = {
                controls: false,
                autoplay: false,
                poster: this.poster,
                sources: [{
                    src: this.videourl,
                    type: "application/x-mpegURL",
                }, ],
            };
            var vm = this;
            this.player = this.$video(
                this.$refs.videoplayer,
                options,
                function onPlayerReady() {
                    vm.adjustcanvas();
                }
            );
            //加载视频时生成画布大小

            this.thumbnailstyle = {
                backgroundImage: "url(" + this.serveurl + this.videoData.thumbnail + ")",
                backgroundPosition: " 0px 0px",
                backgroundSize: "auto 100%",
            };
            var vm = this;
            var i;
            this.player.on("play", function () {
                vm.isplay = true;
                if (vm.ismarkready) {} else {
                    vm.loadmarkcanvas();
                    vm.ismarkready = true;
                }
                vm.isvideoplayershow = false;
                vm.adjustcanvas();
                // vm.loadmarkcanvas();
                if (!this.isEmpty) {
                    vm.hanldeclearcanvas();
                }
                let video = vm.$refs["videoplayer"];
                let canvas = vm.$refs["videocanvas"];
                var context = canvas.getContext("2d");
                i = setInterval(function () {
                    context.drawImage(video, 0, 0, vm.canvaswidth, vm.canvasheight);
                }, 20);
            });
            this.player.on("pause", function () {
                vm.isplay = false;
                clearInterval();
                vm.curtime = vm.currentTime;
                vm.curcomment.curtime = vm.$refs["videoplayer"].currentTime;
            });
        },
        //播放器事件
        handleplay() {
            if (this.isplay) {
                this.player.pause();
                this.isplay = false;
            } else {
                this.player.play();
                this.reloadmarkcanvas();
                this.isplay = true;
                this.curcomid = "";
            }
        },
        timeupdate() {
            if (this.$refs["videoplayer"]) {
                let video = this.$refs["videoplayer"];
                let duration = video.duration;
                let curtime = video.currentTime;
                this.currentTime = getSeconds(parseInt(curtime));
                let progress = curtime / duration;
                this.progress = progress;
            }
        },
        handleseek(evt) {
            this.isvideoplayershow = false;
            if (this.isplay) {

            } else {
                this.player.play();
                this.reloadmarkcanvas();
            }
            this.adjustcanvas();
            let layerwidth = evt.layerX;
            let width = this.$refs["progress"].$el.clientWidth;
            let curprogress = layerwidth / width;
            let seektime = this.$refs["videoplayer"].duration * curprogress;
            this.$refs["videoplayer"].currentTime = seektime;
            this.drawvideocanvas();
            this.curtime = this.currentTime;
            this.curcomment.curtime = this.$refs["videoplayer"].currentTime;
        },
        loadfiledata() {
            let reqdata = {
                work_id: this.work_id,
            };
            getfiledata(reqdata)
                .then((res) => {
                    let filedata = res.data.data;
                    let videoData = filedata[0][0];
                    this.pid = videoData.pid;
                    this.$emit('update:status', videoData.status)
                    let ctime = date.formatDate(videoData.ctime, "YYMMDD");
                    if (!videoData.name) {
                        videoData.name = ctime + "-" + videoData.pname;
                    }
                    videoData.ctime = date.formatDate(
                        videoData.ctime,
                        "YYYY-MM-DD HH:mm"
                    );
                    videoData.videoinfo = JSON.parse(videoData.videoinfo);
                    let duration = videoData.videoinfo.format.duration;
                    let bitrate = videoData.videoinfo.format.bit_rate;
                    let newbitrate =
                        Math.floor((bitrate / 1024 / 1024) * 100) / 100 + "mbps";
                    let size = videoData.videoinfo.format.size;
                    let newsize = Math.floor((size / 1024 / 1024) * 100) / 100 + "MB";
                    let newduration = getSeconds(duration);
                    videoData.videoinfo.format.duration = newduration;
                    videoData.videoinfo.format.bit_rate = newbitrate;
                    videoData.videoinfo.format.size = newsize;
                    let arr = videoData.videoinfo.format.filename.split(".");
                    this.videoformat = arr[arr.length - 1];
                    this.videoData = videoData;
                    this.$emit('update', videoData)
                    this.videoinfo = videoData.videoinfo;
                    this.duration = this.videoinfo.format.duration;
                    this.videowidth = videoData.videoinfo.streams[0].width;
                    this.videoheight = videoData.videoinfo.streams[0].height;
                    return;
                })
                .then(() => {
                    this.loaddplayer();
                });
        },
    },
};
</script>

<style lang="scss">
.markwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.card-shadow {
    box-shadow: 2px 2px 10px rgb(118 173 130 / 20%);
}

>input input::-webkit-input-placeholder {
    color: #cccccc;
}

.thumbnail {
    z-index: 10000000000;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    color: red;
    border: 1px solid grey;
}

.videobg {
    background-color: rgb(0, 0, 0);
}

.activecomment {
    color: white;
    border: 1px solid rgb(0, 150, 136);
    border-radius: 3px;
}
</style>
